<template>
  <a-form-item v-bind="validateInfos.username">
    <a-input
      size="large"
      type="text"
      placeholder="账户: admin"
      v-model:value="modelRef.username"
      autocomplete="username"
    >
      <template v-slot:prefix
        ><user-outlined :style="iconColorStyle"
      /></template>
    </a-input>
  </a-form-item>

  <a-form-item v-bind="validateInfos.password">
    <a-input-password
      size="large"
      placeholder="密码: 123456"
      v-model:value="modelRef.password"
      autocomplete="current-password"
    >
      <template v-slot:prefix><LockOutlined :style="iconColorStyle"/></template>
    </a-input-password>
  </a-form-item>

  <a-row :gutter="16">
    <a-col :span="16">
      <a-form-item v-bind="validateInfos.code">
        <a-input
          size="large"
          type="text"
          placeholder="验证码"
          v-model:value="modelRef.code"
        >
          <template v-slot:prefix
            ><KeyOutlined :style="iconColorStyle"
          /></template>
        </a-input>
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <LoginCodeImg @refresh="updateRandomStr" />
    </a-col>
  </a-row>
</template>
<script lang="ts">
import LoginCodeImg, { LoginCodeImgRefs } from "./CodeImg.vue";
import { UserOutlined, LockOutlined, KeyOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, toRaw } from "vue";
import { useForm } from "@ant-design-vue/use";
import { useStore } from "@/store/index";
import { ActionTypes } from "@/store/modules/user/action-types";
const LoginPassword = defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
    KeyOutlined,
    LoginCodeImg,
  },
  setup() {
    // refs
    const LoginCodeImgRef = ref<LoginCodeImgRefs>();
    // reactive
    const modelRef = reactive({
      username: "",
      password: "",
      code: "",
      randomStr: "",
    });
    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: "请输入用户名",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
        },
      ],
      code: [
        {
          required: true,
          message: "请输入验证码",
        },
      ],
    });
    // use
    const { validate, validateInfos, resetFields } = useForm(
      modelRef,
      rulesRef,
    );
    // methods
    const updateRandomStr = (randomStr: string) => {
      modelRef.randomStr = randomStr;
    };
    const submitForm = () => {
      validate()
        .then(() => {
          const data = toRaw(modelRef);
          // TODO: https://blog.logrocket.com/whats-new-in-vuex-4/
          const store = useStore();
          store.dispatch(ActionTypes.LOGIN_USER, data);
        })
        .catch(err => {
          console.log("error", err);
        });
    };
    // return
    return {
      // const
      iconColorStyle: { color: "rgba(0,0,0,.25)" },
      // refs
      LoginCodeImgRef,
      // reactive
      modelRef,
      validateInfos,
      // methods
      submitForm,
      resetFields,
      updateRandomStr,
    };
  },
});
export default LoginPassword;
export type LoginPasswordRefs = InstanceType<typeof LoginPassword>;
</script>